import React from "react";
import { TabBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import {
  FileOutline,
  SearchOutline,
  HeartOutline,
  CouponOutline,
  UserCircleOutline,
} from "antd-mobile-icons";
const tabs = [
  {
    key: "home/:place",
    title: "首页",
    icon: <FileOutline />,
  },
  {
    key: "list",
    title: "搜索",
    icon: <SearchOutline />,
  },
  {
    key: "xihuan",
    title: "关注",
    icon: <HeartOutline />,
  },
  {
    key: "ticketing",
    title: "票务",
    icon: <CouponOutline />,
  },
  {
    key: "my",
    title: "我的",
    icon: <UserCircleOutline />,
  },
];
type Props = {
  pathname: string;
};

function TabBars(props: Props) {
  const navigate = useNavigate();
  const setRouteActive = (value: string) => {
    navigate("/" + value);
  };
  return (
    <div>
      <TabBar
        activeKey={props.pathname}
        onChange={(value) => setRouteActive(value)}
        style={{ position: "fixed", left: 0, right: 0, bottom: 0,zIndex:9999,background:'#fff' }}
      >
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
        ))}
      </TabBar>
    </div>
  );
}

export default TabBars;
